<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建动态元素</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="button" value="html()" id="btnHtml1">
    <input type="button" value="$()" id="btn1"><br><br>
    <div id="div1">
        <p>p1
            <span>span1</span>
        </p>
    </div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // 原生js创建节点 document.write()
        // html()设置或获取内容
        $('#btnHtml1').click(function () {
            // 不给参数就是获取内容
            $('#div1').html('新设置的内容');
        });
        $('#btn1').click(function () {
            // 相当于原生的document.createElement();
            var $link = $('<a href="我是你哥哥">我是你哥哥</a>');
            $('#div1').append($link);
        })
    })
</script>
</html>